<template>
  <div id="app">
	  <h1>Mock模拟数据</h1>
	  <h3>增删改查</h3>
	  <div class="dialog">
	  	<dialof></dialof>
		<restdia></restdia>
	  </div>
	  <div class="tab">
		  <el-table :key="Math.random()" :data="tableData" border>
			  <el-table-column
			    prop="name"
			    label="姓名"
			    width="70">
			  </el-table-column>
			  <el-table-column prop="image"  label="图片" width="120">
				  <!-- scope代表整个表格范围
                       scope.row代表这一行
                       scope.row.labels代表这一行的labels数据 -->
				  <template slot-scope="scope">
					  <img :src="scope.row.image" style="width: 100%;" />
				  </template>
			  </el-table-column>
			  <el-table-column
			    prop="date"
			    label="时间"
			    width="110">
			  </el-table-column>
			  <el-table-column
			    prop="title"
			    label="标题"
			    width="180">
			  </el-table-column>
			  <el-table-column
			    prop="content"
			    label="内容">
			  </el-table-column>
			  <el-table-column label="操作" prop="name" width="120" class-name="btn">
				  <template slot-scope='scope' >
					  <el-button type="primary" size="mini" @click='edit(scope.row.name)'>编辑</el-button>
					  <el-button type="danger" size="mini" @click='btn(scope.row.name)'>删除</el-button>
				  </template>
			  </el-table-column>
		  </el-table>
	  </div>
	  <div class="block">
	    <el-pagination
	      layout="total,prev, pager, next"
		  @current-change='change'
		  :page-size="pageSize"
	      :total="total">
	    </el-pagination>
	  </div>
  </div>
</template>

<script>
import {getMenu,postMenu,deleteNews,editNews} from './api/data.js'
import dialof from '@/components/dialog.vue'
import restdia from '@/components/restdia.vue'
export default {
  name: 'App',
  components: {
	  dialof,restdia
  },
  data(){
	return {
		tableData: [],//所有数据
		currentPage:1,
		pageSize:5,
		total:0
	}  
  },
  methods:{
	  change(val){
		  getMenu(val,this.pageSize).then(res=>{
			  this.tableData = res.list;
		  })
	  },
	  //删除数据
	  btn(val){
		  deleteNews(val).then(res=>{
			  this.tableData = res.list;
			  this.total = res.list.length;
		  })
		  
	  },
	  //修改数据
	  edit(val){
		  editNews(val).then(res=>{
			  this.$root.$emit('dialogVisible',res)
		  })
	  }
  },
  created() {
  	getMenu(this.currentPage,this.pageSize).then(res=>{
		this.tableData = res.list;
		this.total = res.total
	})
  },
  mounted() {
  	this.$root.$on('emit',data=>{
		 this.tableData = data.list;
		this.total = data.total;
	})
  },
  beforeDestroy() {
  	this.$root.$off('emit')
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.tab{
	width: 80%;
	margin: 0 auto;
}
.btn div{
	display: flex;
	justify-content: space-around;
}
</style>
